<template>
  <el-card>
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText"
      style="width:360px;margin:10px 0"
    >
    </el-input>
    <el-tree
      ref="tree"
      :data="data"
      :props="defaultProps"
      :default-expand-all="true"
      :filter-node-method="filterNode"
      highlight-current
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <span slot-scope="{ node, data }">
        <span style="display:inline-block">{{ node.label }} </span>
        <span style="margin-left:10px" v-if="data.mobile">
          <i class="el-icon-phone"></i>
          {{ data.mobile }}
        </span>
      </span>
    </el-tree>
  </el-card>
</template>

<script>
export default {
  name: "addressBook",
  data() {
    return {
      loading: true,
      data: [],
      filterText: "",
      defaultProps: {
        label: "name",
        children: "children",
        isLeaf: "children"
      }
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    }
  },
  created() {
    this.API.getUserContacts({ key: "orgTreeUserType2" }).then(ret => {
      let data = JSON.parse(ret.data.value);
      this.data = data;
      this.loading = false;
    });
  }
};
</script>

<style></style>
